import React from 'react';
import { inject, observer } from 'mobx-react';

import E8TopLogo from './E8TopLogo';
import E8TopMenu from './E8TopMenu';
import E8FreqUseMenu from './E8FreqUseMenu';
import E8QuickSearch from './E8QuickSearch';
import E8HeaderRight from './E8HeaderRight';

@inject('portalThemeStore')
@observer
class E8Header extends React.Component {
  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo = {} } = portalThemeStore;
    const { themeLogoWidth, themeData = {} } = themeInfo;
    const { topcolor } = themeData;
    const logoWidth = themeLogoWidth == '' ? 225 : parseInt(themeLogoWidth);

    return (
      <div className="e8header-container">
        <div className="e8header-left" style={{ width: logoWidth }}>
          <E8TopLogo ecId={`${(this && this.props && this.props.ecId) || ''}_E8TopLogo@9hb35e`} />
        </div>
        <div className="e8header-right" style={topcolor ? { backgroundColor: topcolor, marginLeft: logoWidth } : { marginLeft: logoWidth }}>
          <div className="e8header-right-menu">
            <E8TopMenu ecId={`${(this && this.props && this.props.ecId) || ''}_E8TopMenu@esnjio`} />
            <E8FreqUseMenu ecId={`${(this && this.props && this.props.ecId) || ''}_E8FreqUseMenu@4kyuqs`} />
            <E8QuickSearch ecId={`${(this && this.props && this.props.ecId) || ''}_E8QuickSearch@iy0cjw`} />
          </div>
          <E8HeaderRight ecId={`${(this && this.props && this.props.ecId) || ''}_E8HeaderRight@btzmp2`} />
        </div>
      </div>
    );
  }
}

export default E8Header;
